<%@ page import="com.itheima.domain.End" %>
<%@ page import="com.itheima.domain.Statistics" %>
<%@ page import="entity.PageResult" %>
<%@ page import="org.springframework.web.servlet.ModelAndView" %>
<%@ page import="com.itheima.service.ListRankingService" %>
<%@ page import="com.itheima.service.BookService" %>
<%@ page import="org.springframework.beans.factory.annotation.Autowired" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- 引入bootstrap 样式文件 -->
    <!-- 引入bootstrap 样式文件 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css">
    <!-- 引入字体图标样式 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font-awesome.min.css">
    <!-- 引入我们自己的首页样式文件 -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
    <script src="${pageContext.request.contextPath}/bootstrap/js/jquery.min.js"></script>
    <!-- <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> -->
    <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>

    <title>Document</title>


</head>

<body>
<!--
    导航栏需要包装 .navbar 并通过.navbar-expand{-sm|-md|-lg|-xl} 用于响应式折叠和 配色方案 类
    navbar-expand-md：包括在一个自动折叠在 md （中屏）中断点处的响应式导览列
    .navbar-dark 深色背景颜色
    .bg-dark 黑色背景
    .navbar-brand 类来设置图片自适应导航栏
     bg-dark navbar-dark 设置黑底白字
     .fixed-top 类来实现导航栏的固定
   -->
<!-- 导航 -->
<nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top">
    <h1 class="title">
        <a class="navbar-brand" href="#">
            <img src="images/logo.png" alt="logo" width="40" height="40">
        </a>
    </h1>
    <!-- 折叠按钮 -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbar">
        <ul class="navbar-nav mr-auto">

            <span class="glyphicon glyphicon-apple" aria-hidden="true"></span>
            <form action="${pageContext.request.contextPath}/user/begin" method="post">
                <button type="submit" class="btn btn-primary">登录</button>
            </form>

            <form action="${pageContext.request.contextPath}/user/register" method="post">
                <button type="submit" class="btn btn-primary">注册</button>
            </form>


        </ul>
        <!-- 搜索框区域 -->
        <!--
          form-inline: 使用1个输入框，一个提交按钮来创建内联表单
          <input>元素在使用.form-control 类的情况下，宽度都是设置为100%，
          .mr-auto 类可以设置子元素右外边距为 auto，即 margin-right: auto!important;
          .mr-sm-2{ margin-right: .5rem!important;}
          input-group-append：margin-left: -1px;
          aria-hidden="true要改善网页的可访问性，来隐藏纯粹用来装饰的图标。
        -->
        <form action="" class="form-inline ml-auto">
            <input type="text" class="form-control mr-sm-2" placeholder="Search">
            <button class="btn btn-outline-secondary  my-2 my-sm-0" type="submit">搜索<i class="fa fa-search"
                                                                                       aria-hidden="true"></i></button>
        </form>
    </div>
</nav>


<!-- 轮播图 -->
<div id="carousel" class="carousel slide carousel-fade w-100 mt-5" data-ride="carousel">
    <!-- 指示符 -->
    <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
        <li data-target="#carousel" data-slide-to="3"></li>
    </ol>
    <!-- 轮播图片 -->
    <div class="carousel-inner pt-3">
        <div class="carousel-item active">
            <img src="images/banner-1.jpg" width="2px" class="mx-auto d-block w-100 h-50">
        </div>
        <div class="carousel-item">
            <img src="images/banner-2.jpg" class="w-100 h-50">
        </div>
        <div class="carousel-item">
            <img src="images/banner-3.jpg" class="w-100 h-50">
        </div>
        <div class="carousel-item">
            <img src="images/banner-4.jpg" class="w-100 h-50">
        </div>
        <!-- 左右切换按钮 -->
        <a class="carousel-control-prev" href="#carousel" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#carousel" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>
</div>

<br/><br/><br/><br/>


<!-- 潮流穿搭小技巧 -->
<div class="trend-skill  mb-8">
    <div class="container w-100">
        <div class="row">
            <div class="card" style="width: 20rem;">
                <img class="card-img-top" src="images/kp1.jpg" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">该系统核心优势一数据库密码加密</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>

            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

            <div class="card" style="width: 20rem;">
                <img class="card-img-top" src="images/kp2.jpg" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">该系统核心优势二具备对用户和管理员的增删改查</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>


            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <div class="card" style="width:20rem;">
                <img class="card-img-top" src="images/kp3.jpg" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">该系统核心优势三具备对数据的可视化和统计</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>

        </div>
    </div>
</div>





<c:forEach items="${gstend.rows}" var="nature">
    <tr>
        <td>${nature.bookid}</td>
        <td>

            <c:forEach items="${pageResult1.rows}" var="nature1">
                <c:if test="${gstend.bookid == nature1.id}">
                    ${nature1.name}
                </c:if>
            </c:forEach>
        </td>
        <td>${gstend.src}</td>
        <td>${gstend.grade}</td>
    </tr>
</c:forEach>


<!-- footer部分 -->
<footer class="bg-dark p-4 text-light text-center">
    <div class="container">
        <h3>合作伙伴</h3>
        <ul class="fa-ul">
            <li class="list-inline-item"><a href="#"><i class="fa fa-cc-discover fa-2x text-white"
                                                        aria-hidden="true"></i></a></li>
            <li class="list-inline-item"><a href="#"><i class="fa fa-dropbox fa-2x text-white" aria-hidden="true"></i></a>
            </li>
            <li class="list-inline-item"><a href="#"><i class="fa fa-eercast fa-2x text-white" aria-hidden="true"></i></a>
            </li>
            <li class="list-inline-item"><a href="#"><i class="fa fa-google-wallet fa-2x text-white"
                                                        aria-hidden="true"></i></a></li>
            <li class="list-inline-item"><a href="#"><i class="fa fa-youtube fa-2x text-white" aria-hidden="true"></i></a>
            </li>
            <li class="list-inline-item"><a href="#"><i class="fa fa-reddit-alien fa-2x text-white"
                                                        aria-hidden="true"></i></a></li>
            <li class="list-inline-item"><a href="#"><i class="fa fa-renren fa-2x text-white" aria-hidden="true"></i></a>
            </li>
            <li class="list-inline-item"><a href="#"><i class="fa fa-skype fa-2x text-white" aria-hidden="true"></i> </a>
            </li>
            <li class="list-inline-item"><a href="#"><i class="fa fa-wpexplorer fa-2x text-white"
                                                        aria-hidden="true"></i></a></li>
        </ul>
        <p class="m-1">企业培训 | 合作事宜 | 版权投诉</p>
        <p>冀ICP 备12345678. © 2019-2025 chaoliuchuanda. Powered by chaopai.</p>
    </div>
</footer>
</body>

</html>